<template>
  <view class="data-index fullpage-min bg-f5 body">
    <nav-bar title="海事科技" hideBack> </nav-bar>

    <view class="login">
      <view class="big-title">智慧水位/桥粱净空高度</view>
      <view class="loginForm">
        <uni-forms :modelValue="formData">
          <uni-forms-item>
            <uni-easyinput
              type="text"
              prefixIcon="person"
              v-model="formData.username"
              placeholder="账户"
            />
          </uni-forms-item>
          <uni-forms-item>
            <uni-easyinput
              type="password"
              prefixIcon="locked"
              v-model="formData.password"
              placeholder="密码"
            />
          </uni-forms-item>
        </uni-forms>
      </view>
      <view class="loginButton">
        <button @click="submitForm">登录</button>
      </view>
    </view>
  </view>
</template>

<script>
import { loginAjax } from "@/pages/login//api/index";
import store from "../../store/modules/user";
export default {
  data() {
    return {
      formData: {
        username: "",
        // account: "admin2",
        password: "",
      },
    };
  },
  onShow() {
    const password = uni.getStorageSync("password");
    const username = uni.getStorageSync("users");
    // console.log(50,username);
    if (password !== "" && username !== "") {
     this.formData.password = JSON.parse(password);
    let name = JSON.parse(username)
    this.formData.username = name.username
    }
  },
  methods: {
    async submitForm() {
      let res = await loginAjax(this.formData);

      // if (res[1].data.code === 200) {
      //   uni.redirectTo({
      //     url: "/pages/data/index",
      //   });
      // }

      if (res[1].data.meta.status === 200) {
        uni.setStorageSync("password", JSON.stringify(this.formData.password));
        //跳转页面
        uni.redirectTo({
          url: "/pages/data/index",
        });
        //  uni.setStorageSync("username",'西Aoki')
        //  uni.setStorageSync("users",JSON.stringify(res[1].data.data))
        this.$store.dispatch("ajaxUser", res[1].data.data);
      } else {
        uni.showToast({
          title: res[1].data.meta.msg,
          duration: 2000,
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  height: 100%;
  background-color: $color-theme;
  margin: 0;
  padding-bottom: 20rpx;

  .main {
    width: 100%;
    padding: 0 20rpx;
    box-sizing: border-box;
    margin-top: 20rpx;

    .right_btn {
      float: right;
      display: flex;
      color: #ccc;
      font-size: 22rpx;

      view {
        line-height: 50rpx;
        height: 50rpx;
        margin: 0 20rpx;
      }

      .active_btn {
        padding: 0rpx 20rpx;
        border: 1px solid #ccc;
        border-radius: 40rpx;
      }
    }

    .row_block {
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 12rpx;
      position: relative;
      padding: 20rpx;

      &::after {
        content: "";
        height: 0px;
        width: 92%;
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        bottom: 0;
        border-top: 1px dashed #ccc;
      }
    }

    .the_title {
      display: flex;
      align-items: center;

      .left_title {
        display: flex;
        align-items: center;
      }

      .title_icon {
        background-color: #7e7e7e;
        height: 40rpx;
        width: 10rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
        font-size: 16px;
        font-weight: 600;
      }
    }

    .view_item {
      padding: 30rpx 20rpx;

      .title {
        text-align: left;
        margin-bottom: 30rpx;
        font-size: 40rpx;
      }
    }

    .progress_circle {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      height: 450rpx;

      .progress_block {
        width: 45%;
        border-radius: 20rpx;
        height: 180rpx;
        position: relative;
        overflow: hidden;

        .name {
          color: #fff;
          font-size: 24rpx;
          position: absolute;
          top: 20rpx;
          left: 10rpx;
          max-width: 144rpx;
        }

        .value {
          color: #fff;
          font-size: 40rpx;
          position: absolute;
          top: 64rpx;
          left: 10rpx;
          max-width: 144rpx;
        }

        .circle {
          position: absolute;
          right: 8rpx;
          top: 16rpx;
        }

        .arcbar {
          position: absolute;
          right: -4rpx;
          top: 8rpx;
        }
      }

      .block_0 {
        background-color: #0fc3ff;
      }

      .block_1 {
        background-color: #ff6b8b;
      }

      .block_2 {
        background-color: #ffcb1d;
      }

      .block_3 {
        background-color: #3bdcaa;
      }
    }
  }
  .big-title {
    padding: 10px;
    font-size: 60rpx;
    font-weight: bold;
    text-align: center;
    color: #eeeeee;
  }
  ::v-deep .uni-card--shadow {
    background-color: #74beff;
  }
  .login {
    margin-top: 250rpx;
  }
  .loginForm {
    padding: 20rpx;
  }
  .loginButton {
    padding: 20rpx;
  }
}

.user_info {
  padding: 80px 0rpx 40rpx 0;
}
</style>
